<template>
  <div>
    <button @click="currentCom = 'acom'">a组件</button
    ><button @click="currentCom = 'bcom'">b组件</button>
    <!-- 
      component 组件可以动态切换组件
      keep-alive 用于缓存组件
    -->
    <keep-alive>
      <component :is="currentCom"></component>
    </keep-alive>
  </div>
</template>
<script>
import acom from "./components/a.vue";
import bcom from "./components/b.vue";
export default {
  data() {
    return {
      currentCom: "acom",
    };
  },
  components: {
    acom,
    bcom,
  },
};
</script>
<style>
</style>